<template>
    <h1>{{ title }}</h1>
    <button @click="handleClick">PushName</button>
    <button @click="handlePath">PushPath</button>
</template>

<script setup lang="ts">
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { ref } from "vue";

const route = useRoute();
const router = useRouter();
console.log("route", route);

const title = ref("useRoute");

if (route.meta && route.meta.title) {
    title.value = route.meta.title as string;
}

const handleClick = () => {
    // router.push({ name: "useMixin" });
    router.push({ name: "useMixin", query: { from: "useMixin" }, params: { from: "useMixin" } });
};

const handlePath = () => {
    // router.push({ path: "/useMixin" });
    router.push({ path: "/useMixin", params: { from: "useMixin" } });
};

onBeforeRouteUpdate((to, from, next) => {
    console.log("Updating useRoute page", { to, from });
    // 可以在这里进行一些更新工作
    next();
});

onBeforeRouteLeave((to, from, next) => {
    console.log("Leaving useRoute page", { to, from });
    // 可以在这里进行一些清理工作
    next();
});
</script>

<style scoped></style>
